<template>
  <div class="main">
    <div class="part">
      <div class="section">
        <div class="title">
          <div>管理概况</div>
          <div>
            <myDestSelect @destChange="destChange" ref="destSelectRef" />
          </div>
        </div>
        <div class="user-table user-table-flex user-table-h300">
          <div class="ut-left">
            <el-table :data="overviewData" style="width: 100%">
              <el-table-column label="">
                <template #header>
                  <div style="display: flex; align-items: center">
                    <span>管理项目</span>

                    <MyToolTip
                      content="本系统健康管理的设计理念，短期聚焦用户住院风险管控，旨在利用风险预测和重点人群管理降低高风险会员再住院发生率，从而实现在较短的时间内抑制医疗费用的增长；长期则关注慢性病会员临床指标改善，旨在利用用户风险预测结果，挖掘高风险会员及可管控的风险点，输出管理方案建议；同时参考国外成熟PBM业务管理经验，对用户药品依从性进行监测及管理，强化用户的慢性病控制率管理，提升会员服务体验和管理获得感。"
                      color="#606266"
                    />
                  </div>
                </template>
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span>{{ scope.row.program }}</span>

                    <MyToolTip
                      :content="programTip[scope.row.program]"
                      color="#606266"
                      v-if="scope.row.program !== '合计(人数已去重)'"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="mngtMember" label="项目总人数" />
              <el-table-column prop="highRiskNumber" label="高风险人数" />
              <el-table-column
                prop="highRiskPercent"
                :formatter="valueToPersent"
                label="高风险占比"
              />
            </el-table>
          </div>
          <div class="ut-right ut-flex-col">
            <div class="ut-row">
              <div class="ut-row-label">管理项目（类）</div>
              <div class="ut-row-num">{{ totalprogram }}</div>
            </div>
            <div class="ut-row">
              <div class="ut-row-label">高风险人群（人）</div>
              <div class="ut-row-num">{{ memberDetail.totalSize }}</div>
            </div>
            <div class="ut-row">
              <div class="ut-row-label">每年预期可节省医保支出(元)</div>
              <div class="ut-row-num">212334</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="part">
      <div class="section">
        <div class="title">
          重疾管理效果
          <!-- <span>17126</span> -->
        </div>
        <div class="user-table">
          <el-tabs
            v-model="tabActive"
            class="demo-tabs"
            @tab-change="changeTabs"
          >
            <el-tab-pane label="再住院管理" name="readmission_stats">
              <Hospital :data="hospitalData" />
            </el-tab-pane>
            <el-tab-pane label="慢性疾病管理" name="chronic_stats">
              <Hospital :data="hospitalData" />
            </el-tab-pane>
            <el-tab-pane
              label="慢性疾病用药依从性管理"
              name="chronic_med_stats"
            >
              <Hospital :data="hospitalData" />
            </el-tab-pane>
            <el-tab-pane label="指定药物依从性管理" name="sp_med_stats">
              <Hospital :data="hospitalData" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref, onUnmounted, reactive } from "vue";
import Hospital from "./components/Hospital.vue";
import {
  getHealthManageOverview,
  getHealthManageInfo,
  getAllMemberDetail
} from "@/api/health";
import MyToolTip from "@/components/myToolTip.vue";

import myDestSelect, { destSelectType } from "@/components/myDestSelect.vue";

const destSelectRef = ref<destSelectType | null>(null);

const tabActive = ref<string>("readmission_stats");

const overviewData = ref([]);

const hospitalData = ref([]);

const totalprogram = ref(0);

const memberDetail = ref({
  data: [],
  totalSize: 0
});

const programTip = reactive({
  再住院管理:
    "慢性病患者在出院后，通常无法得到充分的出院后指导，进而造成短期内二次住院， 增加医疗支出。系统通过预测会员层面心肌梗塞、心力衰竭、肺炎、冠脉搭桥术、脑卒中、人工髋/膝关节置换术和慢阻肺七种疾病的再住院风险，可针对高风险人群进行出院后指导，可以避免短期内再住院发生率，从而在短期内达到降低医疗支出的目的",
  慢性疾病管理:
    "慢性疾病恶化进展的关键诱发因素主要是对血压、 血糖和血脂等临床指标缺乏有效的管控，通过锁定三高人群，针对性地输出血压、血糖和血脂等临床指标改善管理建议，进而降低了未来因并发症急性发作而产生的医疗支出",
  慢性疾病用药依从性管理:
    "慢性疾病用药依从性是慢病用户出院后控制病情、减少并发症的重要评估指标，通过挖掘与分析慢性病患者用药依从性问题，系统提供针对慢性疾病会员的慢性药物（降糖药、降压药、调节胆固醇类依从性管理和指定药物依从性管理，结合慢性疾病管理，可有效控制慢病进展，进而降低了未来因并发症急性发作而产生的医疗支出",
  指定药物依从性管理:
    "通过对特定药品的依从性障碍的分析与管理，定制个性化管理方案，可有效提升重点疾病高风险人群的风险控制效果"
});

function valueToPersent(row, column, value) {
  // console.log("row, column, value:", row, column, value);
  return (value * 100).toFixed(2) + "%";
}

function resetInitData() {
  overviewData.value = [];

  hospitalData.value = [];

  totalprogram.value = 0;

  memberDetail.value = {
    data: [],
    totalSize: 0
  };
}

async function changeTabs(tabName: string) {
  const hmInfoRes = (
    await getHealthManageInfo(
      tabName,
      destSelectRef.value.userSelectedRegions.cityId
    )
  ).result;
  hospitalData.value = hmInfoRes?.data;
}

async function initData(cityId?) {
  const hmOverviewRes = (await getHealthManageOverview(cityId)).result;
  overviewData.value = hmOverviewRes?.list;
  totalprogram.value = hmOverviewRes?.totalprogram;

  const hmInfoRes = (await getHealthManageInfo(tabActive.value, cityId)).result;
  hospitalData.value = hmInfoRes?.data;

  // 获取项目详情
  memberDetail.value = (await getAllMemberDetail(cityId))?.result;
}
function destChange(cityData) {
  resetInitData();
  console.log("cityData:", cityData);
  initData(cityData.cityId);
}

onMounted(() => {
  initData(destSelectRef.value.userSelectedRegions.cityId);
});
onUnmounted(() => {});
</script>
<style scoped lang="scss">
.section {
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      font-size: 24px;
    }
  }

  .user-table {
    margin-top: 20px;

    // &.user-table-h300 {
    //   height: 300px;
    // }
    &.user-table-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ut-left {
      width: 70%;
      height: inherit;
    }

    .ut-right {
      height: inherit;
      width: calc(30% - 40px);

      &.ut-flex-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      }

      .ut-row {
        width: 100%;
        margin-bottom: 20px;

        .ut-row-label {
          @include panelThirdTitle;
          width: inherit;
        }

        .ut-row-num {
          width: inherit;
          font-size: 28px;
        }
      }
    }
  }
}
</style>
